<template>
  <div id="energyAnalyChart" style="width:100%;height:150px"></div>
</template>
<script>
//接口
// import {
//   findAlarmTrendAnalysis,
// } from "@/api/schedule/gisHydrant/index"
export default {
  name: "energyAnalyChart",
  props: {
    energyAnalyData: {
      type: Object,
      default: () => { }
    },
  },
  watch: {
    energyAnalyData: {
      handler (value) {
        console.log(value)
        this.initCharts(value);
      },
      deep: true,
    },
  },
  data () {
    return {

    };
  },
  created () {
  },
  mounted () {

  },
  methods: {
    initCharts (val) {
      let myCharts = this.$echarts.init(document.getElementById('energyAnalyChart'));
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: val.createDateList,
          axisLabel: {//修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#8DB6DB"
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {//修改坐标系字体颜色
            show: true,
            textStyle: {
              color: "#8DB6DB"
            }
          },
        },
        grid: {
          // x: 20,
          y: 25,
          y2: 30,
        },
        series: [
          {
            name: "耗电量",
            data: val.electricQuantityList,
            type: 'line',
            smooth: true,
            color: ["#71CB43"],
          },
          {
            name: "供水量",
            data: val.outflowTotalList,
            type: 'line',
            smooth: true,
            color: ["#CA0303"],
          },
          {
            name: "药耗",
            data: val.doseList,
            type: 'line',
            smooth: true,
            color: ["#E69620"],
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myCharts.setOption(option, true);
      window.addEventListener("resize", () => {
        myCharts.resize();
      });
    }
  }
}
</script>
<style>
#energyAnalyChart {
  z-index: 999;
  padding-left: 5px;
}
</style>